<html>
<head>
  <title>
    Emscripten: OpenJPEG Demo
  </title>
  <script type="text/javascript">
    arguments = [];
    NO_RUN = 1;
  </script>
  <script src="openjpeg.cc.js"></script>
  <script src="syntensity_lobby.j2k.js"></script>
  <script type="text/javascript">
    // Wrapper around OpenJPEG
    function j2k_to_image(data) {
      run();
      _STDIO.prepare('image.j2k', data);
      callMain(['-i', 'image.j2k', '-o', 'image.raw']);
      return _STDIO.streams[_STDIO.filenames['image.raw']].data;
    }

    var imageWidth, imageHeight;

    // print function which the runtime will call. We figure out the image dimensions from there
    function print(text) {
      document.getElementById('output').innerHTML += text + '<br>';
      var m = /Component 0 characteristics: (\d+)x(\d+)x(\d+) unsigned/.exec(text);
      if (!m) return;
      imageWidth = m[1];
      imageHeight = m[2];
      document.getElementById('output').innerHTML += '<b>(Image dimensions: ' + [imageWidth, imageHeight] + ')</b><br>';
    }

    function render(url) {
      imageWidth = imageHeight = null;

      // Demo image by default
      var data = DEMO_FILE;

      // If given a URL, fetch it
      if (url && url[0] != '(') {
        try {
          var xhr = new XMLHttpRequest();
          xhr.open("GET", url, false);
          xhr.send(null);
          var buffer = xhr.mozResponseArrayBuffer;
          if (buffer) data = new Uint8Array(buffer);
        } catch(e) {
          alert('Could not load URL: ' + e);
          return;
        }
      }

      document.getElementById('output').innerHTML = '';
      output = j2k_to_image(data);
      if (!(imageWidth && imageHeight)) { // We should have figured these values out
        alert('An error occurred.');
        return;
      }

      var canvas = document.getElementById('canvas');
      canvas.width = imageWidth;
      canvas.height = imageHeight;

      var ctx = canvas.getContext('2d');
      var image = ctx.getImageData(0, 0, canvas.width, canvas.height);

      var componentSize = canvas.width*canvas.height;
      for (var y = 0; y < canvas.height; y++) {
        for (var x = 0; x < canvas.width; x++) {
          var value = output[y*canvas.width + x];
          var base = (y*canvas.width + x)*4;
          image.data[base + 0] = output[0*componentSize + y*canvas.width + x];
          image.data[base + 1] = output[1*componentSize + y*canvas.width + x];
          image.data[base + 2] = output[2*componentSize + y*canvas.width + x];
          image.data[base + 3] = 255;
        }
      }
      ctx.putImageData(image, 0, 0);
    }
  </script>
</head>
<body>
  <h1>JPEG 2000 on the Web</h1>
  <p>This is a demo of decoding <a href="http://en.wikipedia.org/wiki/JPEG_2000">JPEG 2000</a> images entirely in
     JavaScript. It uses <a href="http://www.openjpeg.org/">OpenJPEG</a>, an open source library for JPEG 2000 images,
     which was compiled to JavaScript using <a href="http://emscripten.org">Emscripten</a>.</p>
  <p>After the image is
     decoded into pixel data, it is rendered using a Canvas element. This demo should therefore work in any web
     browser that supports the Canvas element, whether or not that web browser natively supports the JPEG 2000 format.</p>
  <p><b>Click 'Go!'</b> to render a demo image (from <a href="http://syntensity.com/toplevel/screenshots/">here</a>)
     which has been encoded into a JSON object.
     You can also change the URL to that of a binary JPEG 2000 image, which will be
     downloaded and rendered, but I am not aware of a cross-browser way to receive binary data, so it uses
     a <a href="https://developer.mozilla.org/en/using_xmlhttprequest#Receiving_binary_data_using_JavaScript_typed_arrays">typed array
     property of XHRs</a> (which will only work on Firefox 4).</p>
  <hr>
  <canvas id='canvas' width=1 height=1></canvas>
  <hr>
  <form onsubmit="render(texty.value); return false">
    JPEG 2000 URL: <input type="text" name="texty" size=60 value="(replace this with a URL of a JPEG 2000 file, or just click 'Go!')" onclick="if (value[0] === '(') value=''"><br>
    <input type="submit" value="Go!">
  </form>
  <hr>
  <div id="output" style="font-family: Courier New,Courier,monospace;"></div>
</body>
</html>

